<template>
    <a-layout class="h-screen">
      <!-- 左侧菜单 -->
      <a-layout-sider
        theme="dark"
        :width="220"
        breakpoint="lg"
      >
        <div class="logo">后台管理系统</div>
        <a-menu
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="inline"
          :open-keys="openKeys"
          @openChange="onOpenChange"
        >
          <!-- 静态菜单 -->
          <a-menu-item key="/dashboard">
            <template #icon><PieChartOutlined /></template>
            <router-link to="/dashboard">仪表盘</router-link>
          </a-menu-item>
          <a-menu-item key="/vuejs">
            <template #icon><PieChartOutlined /></template>
            <router-link to="/vuejs">vuejs子应用</router-link>
          </a-menu-item>
          <a-menu-item key="/reactjs">
            <template #icon><PieChartOutlined /></template>
            <router-link to="/reactjs">reactjs子应用</router-link>
          </a-menu-item>
  
          <!-- 动态菜单 -->
          <template v-for="item in menuData">
            <a-sub-menu 
              v-if="item.children"
              :key="item.path"
            >
              <template #title>
                <component :is="item.meta.icon" />
                <span>{{ item.meta.title }}</span>
              </template>
              <a-menu-item 
                v-for="child in item.children"
                :key="child.path"
              >
                <router-link :to="`${item.path}/${child.path}`">
                  {{ child.meta.title }}
                </router-link>
              </a-menu-item>
            </a-sub-menu>
          </template>
        </a-menu>
      </a-layout-sider>
  
      <a-layout>
        <a-layout-header class="header">
          <a-button type="link" @click="logout">
            <LogoutOutlined /> 退出登录
          </a-button>
        </a-layout-header>
        
        <a-layout-content class="p-4">
          <router-view />
        </a-layout-content>
        
        <a-layout-footer class="text-center">
          ©2025 后台管理系统 微应用
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { 
    PieChartOutlined,
    SettingOutlined,
    LogoutOutlined 
  } from '@ant-design/icons-vue'
  import { useAuthStore } from '../stores/auth'
  
  const router = useRouter()
  const route = useRoute()
  const authStore = useAuthStore()
  
  const selectedKeys = ref([route.path])
  const openKeys = ref([])
  const menuData = computed(() => authStore.menuRoutes)
  
  const onOpenChange = (keys) => {
    openKeys.value = keys
  }
  
  const logout = () => {
    authStore.logout()
    router.push('/login')
  }
  </script>
  
  <style scoped>
  .ant-layout {
    width: 100vw;
    height: 100vh;
  }
  .logo {
    height: 64px;
    line-height: 64px;
    text-align: center;
    color: white;
    font-size: 18px;
    background: #002140;
  }
  
  .header {
    background: #fff;
    padding: 0 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  .ant-menu-item a {
    color: inherit;
    text-decoration: none;
  }
  </style>